<template>
    <div class="out-container">
      <el-row align="middle" style="color: #f0f0f0; background: darkcyan; display: flex; justify-content: space-between;">
        <div style="display: flex; align-items: center; margin-left: 1%">
          <h1 class="text1" style="white-space: nowrap;">Doctor--Go | 管理员系统</h1>
  <!--        <el-icon @click="menuIcon" class="icon" style="margin-left: 5%"><Expand/></el-icon>-->
          <el-icon @click="menuIcon" class="icon" style="margin-left: 5%">
            <template v-if="sidebarHidden">
              <Expand />
            </template>
            <template v-else>
              <Fold />
            </template>
          </el-icon>
        </div>
        <div style="display: flex; align-items: center; margin-right: 5%">
          <el-icon @click="messageIcon" class="icon"  style="margin-left: 10%"><BellFilled/></el-icon>
          <el-icon @click="homeIcon" class="icon" style="margin-left: 10%"><HomeFilled/></el-icon>
          <h1 class="text1" style="white-space: nowrap; margin-left:10%"> | {{userName}}</h1>
        </div>
      </el-row>
  
  
      <div class="container">
        <div v-if="!sidebarHidden" class="sidebar" style="background: azure">
          <!-- 这里可以显示头像或姓名 -->
          <router-link to="/admin/statistic" class="nav-link">系统首页</router-link>
          <router-link to="/admin/home" class="nav-link">个人主页</router-link>
          <router-link to="/admin/schedule" class="nav-link">排班管理</router-link>
          <router-link to="/admin/notice" class="nav-link">公告管理</router-link>
          <router-link to="/admin/message" class="nav-link">消息管理</router-link>
          <el-icon @click="Logout" class="logout" style="margin-left: 5%"><CircleCloseFilled/></el-icon>
        </div>
        <main class="content">
          <router-view/>
        </main>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import router from "@/router";
  import store from './store';
  import {BellFilled, Expand, HomeFilled, Fold, CircleCloseFilled} from '@element-plus/icons-vue'
  
  export default {
    name: 'AdminPage',
    components: {HomeFilled, Expand, BellFilled, Fold, CircleCloseFilled},
    setup() {
      const sidebarHidden = ref(false); // 控制边栏显示与隐藏的状态
      const userName = ref();
  
      const menuIcon = () => {
        sidebarHidden.value = !sidebarHidden.value; // 切换边栏的显示状态
      };
  
      const messageIcon = () => {
        //先按照跳转页来做，后面再改成类似Gitee的
        router.push('/admin/message')
      };
  
      const homeIcon = () => {
        router.push('/admin/home')
      };
  
      const Logout = () => {
        store.commit('clearCurrentUser');
        router.replace({path:'/'})
      };
  
      onMounted(() => {
        // 在组件加载完成时，触发首页链接的点击事件
        router.push('/admin/statistic') // Vue 3 中的路由跳转方式可能不同，具体根据你的路由配置而定
  
        //获取用户名
        userName.value = "管理员"
      });
  
      return {
        sidebarHidden,
        menuIcon,
        homeIcon,
        messageIcon,
        Logout,
        userName
      };
    }
  };
  </script>
  
  <style scoped>
  /* Add your component styles here */
  .out-container{
    width: 100%;
    height: 10%;
  }
  
  .sidebar {
    width: 10%;
    padding: 1%;
    border-right: 1px solid #ddd;
    height: 100vh;
  }
  .sidebar a {
    display: block;
    margin-bottom: 1em;
    font-weight: bold;
    color: #2c3e50;
  
    &.router-link-exact-active {
      color: #42b983;
    }
  }
  
  .icon {
    font-size: 200%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 0;
    padding: 1% 1%;
  }
  
  .logout {
    font-size: 300%;
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 3%;
    cursor: pointer;
  }
  
  .container {
    display: flex; /* 使用 flexbox 布局 */
  }
  
  .content {
    flex: 1; /* 让内容部分占据剩余空间 */
    padding: 1%;
  }
  
  .nav-link {
    font-size: 180%; /* 设置链接字体大小为 18 像素 */
  }
  </style>